<template>
	<el-dialog
		:title="title"
		:visible.sync="visible"
		width="80%"
		@close="close"
		v-loading="loading">
		<div>
			<el-form
				:model="form"
				ref="formData"
				:inline="false"
				label-width="130px"
				size="normal"
				label-position="right">
				<el-row :gutter="30">
					<el-col :span="24">
						<div class="mini-title" style="margin-left: 20px">
							客户信息
						</div>
					</el-col>

					<el-col :span="8">
						<el-form-item label="客户名称:" prop="customerName">
							<span>{{ form.customerName | filterNull }}</span>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="纳税识别号:" prop="taxpayerId">
							<span>{{ form.taxpayerId | filterNull }}</span>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="开户银行:" prop="customerBankName">
							<span>
								{{ form.customerBankName | filterNull }}
							</span>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item
							label="银行账号:"
							prop="customerBankAccountName">
							<span>
								{{ form.customerBankAccountName | filterNull }}
							</span>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item
							label="地址:"
							prop="customerAddr"
							:rules="[
								{
									required: true,
									message: '请输入地址',
									trigger: 'blur',
								},
							]">
							<el-input
								v-model="form.customerAddr"
								placeholder="请输入地址"
								size="mini"
								clearable></el-input>
						</el-form-item>
					</el-col>
					<!--                    <el-col :span="8">-->
					<!--                        <el-form-item label="邮箱:" prop="customerMail">-->
					<!--                            <span>{{ form.customerMail|filterNull }}</span>-->
					<!--                        </el-form-item>-->
					<!--                    </el-col>-->

					<el-col :span="24">
						<div class="mini-title" style="margin-left: 20px">
							开票信息
						</div>
					</el-col>

					<el-col :span="8">
						<el-form-item
							label="发票类型:"
							prop="invoiceType"
							:rules="
								0 == type
									? {
											required: true,
											message: '请选择发票类型',
											trigger: 'change',
											validator: (
												rule,
												value,
												callback,
											) =>
												validData(
													rule,
													form.invoiceType,
													callback,
												),
									  }
									: {}
							">
							<el-select
								filterable
								v-if="0 == type"
								v-model="form.invoiceType"
								clearable
								style="width: 100%">
								<template
									v-for="dict in dict.type.invoice_type">
									<el-option
										:label="dict.label"
										:value="dict.value"
										:key="dict.value"></el-option>
								</template>
							</el-select>

							<span v-else>
								<dict-tag
									:options="dict.type.invoice_type"
									:value="form.invoiceType" />
							</span>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="开票金额:" prop="invoiceAmount">
							<span>{{ form.invoiceAmount | filterNull }}</span>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item
							label="发票号码:"
							prop="invoiceCode"
							:rules="
								0 == type
									? {
											required: true,
											message: '请输入发票号码',
											trigger: 'blur',
											validator: (
												rule,
												value,
												callback,
											) =>
												validData(
													rule,
													form.invoiceCode,
													callback,
												),
									  }
									: {}
							">
							<el-input
								maxlength="50"
								v-if="0 == type"
								type="text"
								style="width: 80%"
								v-model="form.invoiceCode"
								clearable
								placeholder="请输入发票号码"></el-input>
							<span class="text-bold" v-else>
								{{ form.invoiceCode | filterNull }}
							</span>
						</el-form-item>
					</el-col>
					<el-col :span="24">
						<el-form-item
							label="发票附件:"
							prop="invoiceImg"
							style="width: 100%"
							:rules="
								0 == type
									? {
											required: true,
											message: '请选择附件',
											trigger: 'change',
											validator: (
												rule,
												value,
												callback,
											) =>
												validData(
													rule,
													form.invoiceImg,
													callback,
												),
									  }
									: {}
							">
							<ImageCommon
								:disabled="1 == type"
								:key="imageKey"
								:up-type="2"
								info="选择附件"
								:limit="9"
								v-model="form.invoiceImg"></ImageCommon>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
		</div>
		<span slot="footer" v-if="0 == type">
			<el-button @click="close">取消</el-button>
			<el-button type="primary" @click="confim">提交</el-button>
		</span>
	</el-dialog>
</template>
<script>
	import { isEmpty } from 'lodash';
	import {
		settleInvoiceAdd,
		settleInvoiceDetail,
	} from '@/api/finance/manage/settle/api';
	import { customerInvoice } from '@/api/memberManage/memberList';
	import { getOrderDetail } from '@/api/vehicleOrder';

	export default {
		name: 'InvoiceDialog',
		dicts: ['invoice_type'],
		data() {
			return {
				type: 0,
				title: '开票',
				visible: false,
				form: {
					customerName: '',
					taxpayerId: '',
					customerBankName: '',
					customerBankAccountName: '',
					customerAddr: '',
					invoiceType: '',
					invoiceAmount: '',
					invoiceCode: '',
					invoiceImg: '',
				},
				imageKey: 0,
				loading: false,
			};
		},
		mounted() {},
		methods: {
			validData(rule, value, callback) {
				// console.log('aaa', rule, value, callback)
				if (rule.required && !value) {
					// this.$modal.msgError(`未填写${value}`);
					callback(new Error(rule.message));
				} else {
					callback();
				}
			},
			// 确定按钮
			confim() {
				this.$refs.formData.validate(valid => {
					if (valid) {
						this.loading = true;
						settleInvoiceAdd(this.form)
							.then(res => {
								if (res.code == 200) {
									this.close();
									this.$emit('success');
									this.$message({
										type: 'success',
										message: '提交成功',
									});
								}
								this.loading = false;
							})
							.finally(f => {
								this.loading = false;
							});
					}
				});
			},
			/**
			 * 显示弹框
			 * @param {0:新增 1:详情} type
			 * @param settleId
			 */
			//row.invoiceStatus, row.settleId
			show(row) {
				this.form = {
					customerName: '',
					taxpayerId: '',
					customerBankName: '',
					customerBankAccountName: '',
					customerAddr: '',
					invoiceType: '',
					invoiceAmount: '',
					invoiceCode: '',
					invoiceImg: '',
				};
				this.type = row.invoiceStatus;
				// 延时处理重置数据,防止数据污染
				this.$nextTick(() => {
					this.$refs.formData && this.$refs.formData.resetFields();
				});

				this.title = this.type == 1 ? '查看发票' : '开票';

				if (1 == this.type) {
					settleInvoiceDetail(row.settleId).then(res => {
						if (res.code == '200') {
							this.form = res.data ? res.data : {};
							this.$forceUpdate();
						}
					});
				} else {
					this.form.invoiceAmount = row.settleAccountsAmount;
					this.form.settleId = row.settleId;
					this.form.settleCode = row.settleCode;

					customerInvoice(row.earnCustomerId).then(res => {
						if (res.data) {
							this.form.customerId = res.data.customerId;
							this.form.customerName = res.data.invoiceTitle;
							this.form.taxpayerId =
								res.data.taxpayerIdentityNumber;
							this.form.customerBankName = res.data.bankName;
							this.form.customerBankAccountName =
								res.data.bankAccountName;
							this.form.customerAddr = res.data.invoiceAddr;
						}

						this.$forceUpdate();
					});
					this.$forceUpdate();
					// row.orderCode = row.orderCode.replace(/[\[\]]/g, '')
					// getOrderDetail(row.orderCode).then(res=>{
					//     this.form.invoiceType = res.data.invoiceType
					//
					//     this.$forceUpdate()
					// })
				}
				this.imageKey++;
				this.visible = true;
			},
			close() {
				this.form = {
					customerName: '',
					taxpayerId: '',
					customerBankName: '',
					customerBankAccountName: '',
					customerAddr: '',
					invoiceType: '',
					invoiceAmount: '',
					invoiceCode: '',
					invoiceImg: '',
				};
				this.visible = false;
			},
		},
	};
</script>
<style lang="scss" scoped>
	.editStyle {
		width: 200px;
	}

	.el-input__inner {
		height: 32px !important;
		line-height: 32px !important;
	}
</style>
